<script lang="ts" setup>
import { computed } from 'vue';

import { Image, Modal } from 'ant-design-vue';

const props = defineProps({
  show: {
    type: Boolean,
    default: false,
  },
  data: {
    type: Object,
    default: () => ({}),
  },
});

const emit = defineEmits(['update:show']);

const showModal = computed({
  get() {
    return props.show;
  },
  set(newValue) {
    emit('update:show', newValue);
  },
});

// 确认事件
const handleOk = () => {
  showModal.value = false;
};
</script>
<template>
  <div>
    <Modal v-model:open="showModal" title="查看发票" @ok="handleOk">
      <div>
        <div
          :style="{ backgroundImage: `url(${data.invoiceUrl})` }"
          class="image-list relative my-1.5 mr-3 overflow-hidden rounded-md bg-gray-100 bg-contain bg-center bg-no-repeat"
        >
          <Image
            :height="148"
            :preview="true"
            :src="data.invoiceUrl"
            :width="148"
            class="image-list z-[10] opacity-0"
          />
        </div>
      </div>
    </Modal>
  </div>
</template>
<style scoped lang="scss">
.image-list {
  width: 148px;
  height: 148px;
}
</style>
